<template>
  <div>
    <h1>{{$route.meta.title}}</h1>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>搜索</span>
      </div>
      <div>
        <el-form :inline="true" :model="formInline" ref="formInline">
          <el-form-item label="活动名称">
            <el-input v-model="formInline.activity_name" placeholder="活动名称"></el-input>
          </el-form-item>
          <el-form-item label="活动状态">
            <el-select v-model="formInline.status" placeholder="活动状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="进行中" value="进行中"></el-option>
              <el-option label="已结束" value="已结束"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="warning" @click="resetList">重新获取</el-button>
            <el-button type="success" @click="openDialog('add')">新增记录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%;margin-top:20px;"
      v-loading="isLoading"
    >
      <!-- <el-table-column label="活动图标">
        <template slot-scope="scope">
          <img :src="scope.row.img" width="100" height="100"/>
        </template>
      </el-table-column>-->
      <el-table-column prop="activity_name" label="活动名称"></el-table-column>
      <el-table-column label="活动链接" width="80">
        <template slot-scope="scope">
          <el-link :href="scope.row.activity_url" type="primary" target="_blank">传送门</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="start_time" label="开始时间" width="200"></el-table-column>
      <el-table-column prop="end_time" label="结束时间" width="200"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <span
            :class="[scope.row.status=='进行中' ? 'success_text':'error_text']"
          >{{scope.row.status}}</span>
        </template>
      </el-table-column>
      <el-table-column label="社区文章" width="100">
        <template slot-scope="scope">
          <el-link
            :href="scope.row.post_link"
            type="primary"
            v-if="scope.row.post_link"
            target="_blank"
          >传送门</el-link>
          <span v-else>找不到链接</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-link type="primary" icon="el-icon-edit" @click="openDialog('edit',scope.row)">编辑</el-link> |
          <el-link type="success" icon="el-icon-position" @click="toHot(scope.row)">查看热度</el-link> | 
          <el-link type="danger" icon="el-icon-delete-solid" @click="deleteActivity(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogHandle=='add' ? '添加活动':'编辑活动'" :visible.sync="dialogFormVisible" width="40%" >
      <el-form :model="dialogForm" label-width="100px" :rules="rules" ref="dialogForm">
        <el-form-item label="活动名称：" prop="activity_name">
          <el-input v-model="dialogForm.activity_name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="活动链接：" prop="activity_url">
          <el-input v-model="dialogForm.activity_url"  autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="开始时间：" prop="start_time">
          <el-date-picker
            v-model="dialogForm.start_time"
            type="date"
            placeholder="选择日期"
            style="width:100%;"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间：" prop="end_time">
          <el-date-picker
            v-model="dialogForm.end_time"
            type="date"
            placeholder="选择日期"
            style="width:100%;"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="社区链接：" prop="post_link">
          <el-input v-model="dialogForm.post_link" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="活动状态：" prop="status">
          <el-select v-model="dialogForm.status" placeholder="请选择活动区域" style="width:100%;">
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="已结束" value="已结束"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<style lang='less' scoped>
.success_text {
  color: #42b983;
}
.error_text {
  color: #d63200;
}
</style>

.
<script>
import { getList, resetActivityList, addOne, updateOne, deleteOne } from "@/api/admin/activity";
import Setting from "@/Setting";
export default {
  data() {
    return {
      tableData: [],
      formInline: {
        activity_name : "",
        status : ""
      },
      isLoading: true,
      dialogFormVisible: false,

      dialogForm: {
        id: "",
        activity_name: "",
        activity_url: "",
        start_time: "",
        end_time: "",
        status: "进行中",
        post_link: "",
        // type: 1 // 0-系统爬取，1-用户添加
      },
      rules: {
        activity_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ],
        start_time: [
          {
            type: "date",
            required: true,
            message: "请选择开始日期",
            trigger: "blur"
          }
        ],
        end_time: [
          {
            type: "date",
            required: true,
            message: "请选择结束日期",
            trigger: "blur"
          }
        ],
        post_link: [
          {
            required: true,
            message: "请输入对应的社区文章的链接",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择活动状态",
            trigger: "change"
          }
        ]
      },
      dialogHandle:'add',
    };
  },
  methods: {
    deleteActivity(id){
      this.$confirm(
        "删除将无法恢复，请谨慎操作",
        "提示",
        {
          confirmButtonText: "确定删除",
          cancelButtonText: "点错了",
          type: "warning"
        }
      ).then(() => {
        deleteOne(id).then(res=>{
          this.$message(res.msg);
          this.isLoading = true
          this.getList()
        }).catch(err=>{
          this.$message.error(err);
        })
      });

      
    },
    getList() {
      getList(this.formInline).then(res => {
        this.tableData = res.data;
        this.isLoading = false;
      });
    },
    toHot(row) {
      this.$router.push({
        name: "article_hot",
        query: {
          activity_name: row.activity_name,
          post_link: row.post_link,
          start_date: row.start_time,
          end_date: row.end_time
        }
      });
    },
    resetList() {
      this.$confirm(
        "将重新爬取文章列表，是否确定（不删除用户添加的记录）",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.isLoading = true;
        resetActivityList().then(res => {
          if (res.status == 200) {
            this.getList();
          }
        });
      });
    },
    search() {
      this.isLoading = true;
      this.getList();
    },
    openDialog(type,data) {

      this.dialogFormVisible = true;
      this.dialogHandle = type;
      
      if(this.$refs['dialogForm'] !== undefined){
        this.$refs['dialogForm'].resetFields();
      }

      this.$nextTick(()=>{
        if(this.dialogHandle=='edit'){
          this.$set(this.dialogForm,'id',data.id)
          this.$set(this.dialogForm,'activity_name',data.activity_name)
          this.$set(this.dialogForm,'activity_url',data.activity_url)
          this.$set(this.dialogForm,'start_time',new Date(data.start_time.replace(/-/g,'/')))
          this.$set(this.dialogForm,'end_time',new Date(data.end_time.replace(/-/g,'/')))
          this.$set(this.dialogForm,'post_link',data.post_link)
          this.$set(this.dialogForm,'status',data.status)
        }
      })

      
      
      
      // if(this.dialogFormVisible){}
      
      // if(type=='add'){
      //   this.$delete(this.dialogForm,'id')
      // }else{
      //   //this.dialogFormVisible = true;
      // }
    },
    submitHandle() {

      this.$refs['dialogForm'].validate((valid) => {
          if (!valid) {
            this.$message.error('表单验证出错，无法提交!');
            return false;
          }
      });

      if(this.dialogHandle == 'add'){ //新增

        if(this.dialogForm.hasOwnProperty('id')){
          this.$delete(this.dialogForm,'id')
        }
        this.$set(this.dialogForm,'start_time',+this.dialogForm.start_time)
        this.$set(this.dialogForm,'end_time',+this.dialogForm.end_time)
        addOne(this.dialogForm).then(res=>{
          this.$message(res.msg);
          this.isLoading = true
          this.getList()
        })
      }else{  //修改
        this.$set(this.dialogForm,'start_time',+this.dialogForm.start_time)
        this.$set(this.dialogForm,'end_time',+this.dialogForm.end_time)
        updateOne(this.dialogForm).then(res=>{
          this.$message(res.msg);
          this.isLoading = true
          this.getList()
        }).catch(err=>{
          this.$message.error(err);
        })
      }
      this.dialogFormVisible = false;
      
    },

  },
  created() {
    this.getList();
  }
};
</script>